<template>
    <div class="list">
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="工作日志" style="position: relative;top: 10px;left: 5px;">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <el-form :model="params" style="width: 100%;">
            <el-container>
                <!--内容-->
                <el-form-item>
                    <el-input v-model="params.content" style="width: 200px;"></el-input>
                </el-form-item>
                <!--字段类型-->
                <el-form-item style="margin-left: 10px">
                    <el-select v-model="params.field" :value="params.field" style="width: 200px;">
                        <el-option
                                v-for="type in typeList"
                                :label="type.value"
                                :value="type.key"
                                :key="type.key"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!--日志类型-->
                <el-form-item style="margin-left: 10px">
                    <el-cascader @change="handleChangeLogType" v-model="logTypeArray" :options="options"
                                 clearable></el-cascader>
                </el-form-item>
                <!--案件类型-->
                <el-form-item style="margin-left: 10px">
                    <el-select v-model="params.caseType" :value="params.caseType" style="width: 150px;">
                        <el-option label="案件类型" value=""></el-option>
                        <el-option
                                v-for="caseType in caseTypeList"
                                :label="caseType.caseTypeName"
                                :value="caseType.id"
                                :key="caseType.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!--结案状态-->
                <el-form-item style="margin-left: 10px">
                    <el-select v-model="params.status" :value="params.settleStatus" style="width: 120px;">
                        <el-option value="" label="公开状态"></el-option>
                        <el-option value="Y" label="已公开"></el-option>
                        <el-option value="N" label="未公开"></el-option>
                    </el-select>
                </el-form-item>
                <!--时间-->
                <el-form-item style="margin-left: 10px">
                    <el-date-picker
                            v-model="params.startTime"
                            align="right"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="margin-left: 10px">
                    <el-date-picker
                            v-model="params.endTime"
                            align="right"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="margin-left: 10px">
                    <el-button type="primary" @click="handleSearch">检索</el-button>
                </el-form-item>
            </el-container>
        </el-form>

        <el-table :border="true" :data="pageResult.records">
            <el-table-column label="日志类型" prop="typeName"></el-table-column>
            <el-table-column label="案号" prop="caseNo"></el-table-column>
            <el-table-column label="客户名称" prop="client"></el-table-column>
            <el-table-column label="开始时间" prop="joblogStarttime"></el-table-column>
            <el-table-column label="结束时间" prop="joblogEnddtime"></el-table-column>
            <el-table-column label="工作描述" prop="joblogText"></el-table-column>
            <el-table-column label="公开状态" prop="caseSettleStatus">
                <template slot-scope="scope">
                    {{scope.row.joblogStatus == 'Y'?'已公开': '未公开'}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-dropdown trigger="click" @command="handleCommandClick">
                        <el-button>
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="beforeHandlerCommand(scope.row,'show')">查看</el-dropdown-item>
                            <el-dropdown-item :command="beforeHandlerCommand(scope.row,'update')">修改</el-dropdown-item>
                            <el-dropdown-item :command="beforeHandlerCommand(scope.row,'delete')">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-footer class="case-list-footer">
            <el-pagination
                    style="margin: 10px auto"
                    background
                    layout="prev, pager, next"
                    :total="pageResult.total"
                    :page-size="pageResult.size"
                    class="pagination"
                    @current-change="handleIndexChange"
            >
            </el-pagination>
        </el-footer>

        <el-dialog
                title="详细信息"
                :visible.sync="centerDialogVisible"
                width="70%"
                center>
            <log-details :logJob="logJob"></log-details>
        </el-dialog>
    </div>
</template>

<script>
    //引入组件
    const LogDetails = () => import('./LogDetails.vue')
    //引入案件类型服务类
    import CaseTypeService from '../../../model/gs/CaseTypeService.js'
    import {LogTypeService} from "../../../model/gs/LogTypeService";
    import {LogJobService} from "../../../model/gs/LogJobService";

    const caseTypeService = CaseTypeService.getInstance()
    const logTypeService = LogTypeService.getInstance()
    const logJobService = LogJobService.getInstance()

    export default {
        data() {
            return {
                logJob: {},
                centerDialogVisible: false,
                pageResult: {},
                params: {
                    field: 'case_no',
                    logType: '',
                    caseType: '',
                    status: '',
                    startTime: '',
                    endTime: ''
                },
                caseTypeList: [],
                typeList: [
                    {
                        key: 'case_no',
                        value: '案号搜索'
                    },
                    {
                        key: 'client',
                        value: '客户名搜索'
                    },
                    {
                        key: 'user_realname',
                        value: '律师搜索'
                    }
                ],
                options: [],
                logTypeArray: []
            }
        },
        methods: {
            goBack() {
                history.back()
            },
            //获取案件类型的方法
            getCaseTypeList() {
                caseTypeService.parentList().then(response => {
                    if (response.data.code === 0) {
                        this.caseTypeList = response.data.data
                    }
                })
            },
            //角标改变的事件
            handleCommandClick(command) {
                switch (command.type) {
                    case 'show':
                        this.handleShowDetails(command.logJob);
                        break;
                    case 'delete':
                        this.handleDelete(command.logJob);
                        break;
                    case 'update':
                        this.handleUpdate(command.logJob);
                        break;
                }
            },
            //修改的方法
            handleUpdate(logJob) {
                logJobService.getById(logJob.id).then(response => {
                    if(response.data.code === 0){
                        this.$router.push({
                            name:'EditLog',
                            params:{
                                logJob : response.data.data
                            }
                        })
                    }
                })
            },
            //删除的方法
            handleDelete(logJob) {
                this.$confirm('确定删除该记录？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    logJobService.remove(logJob.id).then(response => {
                        if (response.data.code === 0) {
                            this.$message.success({
                                message: '删除成功',
                                duration: 1000
                            })
                            this.getJoblogList()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //查看详情的方法
            handleShowDetails(logJob) {
                this.logJob = logJob
                this.centerDialogVisible = true
            },
            //角标改变之前的事件
            beforeHandlerCommand(logJob, type) {
                return {
                    logJob, type
                }
            },
            //获取级联数据
            getCascader() {
                logTypeService.getCascader().then(response => {
                    if (response.data.code === 0) {
                        this.options = response.data.data
                    }
                })
            },
            //获取表格数据
            getJoblogList() {
                logJobService.getByPage(this.params).then(response => {
                    if (response.data.code === 0) {
                        this.pageResult = response.data.data
                    }
                })
            },
            //检索的点击事件
            handleSearch() {
                this.params.page = 1
                this.getJoblogList()
            },
            //日志类型变化的方法
            handleChangeLogType() {
                this.params.logType = this.logTypeArray[1]
            },
            //当前页发生变化的方法
            handleIndexChange(index) {
                this.params.page = index
                this.getJoblogList()
            },
            //控制是我的日志还是全部日志
            setIsOwn() {
                if (this.$route.path == '/MyJoblog') {
                    this.params.isOwn = '1'
                } else {
                    delete this.params.isOwn
                }
            }
        },
        watch: {
            $route: {
                handler() {
                    this.setIsOwn()
                    this.getJoblogList()
                },
                deep: true
            }
        },
        created() {
            this.setIsOwn()
            this.getCascader()
            this.getJoblogList()
            this.getCaseTypeList()
        },
        components: {
            LogDetails
        }
    }
</script>

<style scoped>
    .case-list-footer {
        width: 100%;
        height: 10%;
        position: relative;
    }

    .case-list-footer .pagination {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
</style>
